import 'package:flutter/material.dart';
import './tabs/home.dart';
import './tabs/category.dart';
import './tabs/message.dart';
import './tabs/user.dart';
import './tabs/setting.dart';

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  final List<Widget> _pages = [
    HomePage(),
    CategoryPage(),
    MessagePage(),
    SettingPage(),
    UserPage(),
  ];

  @override
  Widget build(BuildContext context) {
    print(_currentIndex);
    return Scaffold(
      appBar: AppBar(title: Text('Flutter app')),
      /**
       * Drawer 用于实现侧边栏菜单的控件，通常配合Scaffold使用
       * drawer：属性将Drawer添加到页面左侧
       * endDrawer：添加到右侧
       */
      drawer: Drawer(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: UserAccountsDrawerHeader(
                    accountName: Text('itying'),
                    accountEmail: Text('xxx@qq.com'),
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage(
                        'https://www.itying.com/images/flutter/3.png',
                      ),
                    ),
                    otherAccountsPictures: [
                      CircleAvatar(
                        backgroundImage: NetworkImage(
                          "https://www.itying.com/images/flutter/4.png",
                        ),
                      ),
                      CircleAvatar(
                        backgroundImage: NetworkImage(
                          "https://www.itying.com/images/flutter/5.png",
                        ),
                      ),
                    ],
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage(
                          "https://www.itying.com/images/flutter/2.png",
                        ),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 60),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.person)),
              title: Text('个人中心'),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(child: Icon(Icons.settings)),
              title: Text('系统设置'),
            ),
            Divider(),
          ],
        ),
      ),
      endDrawer: const Drawer(child: Column(children: [Text('右侧栏目')])),
      body: _pages[_currentIndex],
      // 设置底部菜单
      bottomNavigationBar: BottomNavigationBar(
        iconSize: 25, // 图标大小
        fixedColor: Colors.red, // 选中后颜色
        currentIndex: _currentIndex, // 第几个菜单被选中做
        type: BottomNavigationBarType.fixed, //底部有四个或4个以上需要配置
        onTap: (idx) {
          setState(() {
            _currentIndex = idx;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '用户'),
        ],
      ),
      //设置浮动按钮
      floatingActionButton: Container(
        margin: const EdgeInsets.only(bottom: 5), // 调整位置
        child: Container(
          width: 60,
          height: 60,
          padding: EdgeInsets.all(2),
          decoration: BoxDecoration(
            color: Colors.black26,
            shape: BoxShape.circle,
          ),

          child: FloatingActionButton(
            backgroundColor: _currentIndex == 2 ? Colors.red : Colors.yellow,
            onPressed: () {
              setState(() {
                _currentIndex = 2;
              });
            },
            shape: const CircleBorder(),
            child: Icon(Icons.add),
          ),
        ),
      ),
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked, // 浮动按钮的位置
    );
  }
}
